<template>
   <div  class="container">
  
  <h1>{{obj.name}}</h1>
 
 <button @click="updateName">修改姓名</button>
   </div>
</template>

<script>
import {reactive, toRef} from 'vue'
export default {
name:'App',

setup() {
//模板上只需要响应式数据对象中的一个属性值
// 使用 toRef函数
  const obj = reactive({
   name:'ls',
   age:18
  })
  console.log(obj); //proxy代理的数据响应式的
//   响应式数据解构出来的数据是普通数据 不能实现响应式
   // let{name}=obj
   // 应该用toRef
   // 单独取出响应式数据对象中的一个属性变成响应式的数据 修改值的时候要 .value 
  const name =toRef(obj,'name')
   // console.log(name);
   const updateName=()=>{
      console.log('updateName');
      // toRef转换响应式数据包装成对象，value是存放值的地方
      name.value='zs'
   }
return {obj,updateName}
},

}
</script>

<style>

</style>